<template>
  <div :class="['the-table-header-container', { smallLeft: isCollapsedRef }]" >
    <div class="the-table-header-left" v-if="userInfo.identity === 1">
      <a-button class="mr-10" type="primary" shape="round" size="small" @click="props.openAddDialog">
        <template #icon>
          <BaseIcon type="add" />
        </template>
        新增
      </a-button>
      <a-button type="primary" shape="round" size="small" danger @click="onDelete">
        <template #icon>
          <BaseIcon type="delete" />
        </template>
        批量删除
      </a-button>
    </div>
    <div class="the-table-header-right">
      <a-pagination
        :current="page"
        :pageSize="size"
        :total="total"
        simple
        show-size-changer
        :pageSizeOptions="pageSizeOptionsRef"
        @change="(page) =>props.changeCurrentPage(page)"
        @showSizeChange="onShowSizeChange"
      />

      <span class="pagination-text">共计{{ total }}条记录</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import appStore from "@/store";
import apis from '@/apis/index';
import { message, Modal } from "ant-design-vue";
const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '');
const props = defineProps({
  page: {
    type: Number,
    default: 1,
  },
  size: {
    type: Number,
    default: 5,
  },
  total: {
    type: Number,
    default: 10,
  },
  changeCurrentPage: {
    type: Function,
    default: () => {},
  },
  openAddDialog: {
    type: Function,
    default: () => {}
  },
  interfaceType: {
    type: String,
    default: '',
  },
  interfaceName: {
    type: String,
    default: '',
  }
});
const { isCollapsedRef } = storeToRefs(
  appStore.useStaffStore
);
const { idsRef } = storeToRefs(appStore.useCommonStore);
const pageSizeOptionsRef = ref(["5", "10", "15"]);
// const onChange = (newPage: number, pageSize: number) => {
//   console.log(newPage, pageSize);
// };
const onShowSizeChange = (current: number, pageSize: number) => {
  console.log(current, pageSize);
};
// 删除按钮处理事件
const onDelete = () => {
  if (!idsRef.value.length) {
    return message.error('请先指定删除的列表项');
  }
  Modal.confirm({
    title: '温馨提示',
    content: '确定要删除选中的数据吗？',
    onOk: deleteItems,
  })
}
// 调用删除接口
const deleteItems = async () => {
  let params = {};
  if (props.interfaceType == 'staff') {
    params = {
      staffIdArr: idsRef.value
    }
  }
  if (props.interfaceType == 'level') {
    params = {
      levelId: idsRef.value[0]
    }
  }
  if (props.interfaceType == 'assessment') {
    params = {
      assessmentId: idsRef.value[0]
    }
  }
  if (props.interfaceType == 'adjustSalary') {
    params = {
      salaryAdjustmentId: idsRef.value[0]
    }
  }
  if (props.interfaceType == 'rewardPunishment') {
    params = {
      rewardPunishmentId: idsRef.value[0]
    }
  }
  if (props.interfaceType == 'attendance') {
    params = {
      rewardPunishmentId: idsRef.value[0]
    }
  }
  
  // const params = {
  //   staffIdArr: idsRef.value
  // }
    console.log(params,'ppp')
  const res = await apis[props.interfaceType][props.interfaceName](params);
  console.log(res, 'delete')
  if (!res) {
    message.error('员工删除失败');
    return;
  }
  message.success('员工删除成功');
  idsRef.value = [];
  props.changeCurrentPage(1);
}
</script>

<style lang="less">
.the-table-header-container {
  position: fixed;
  left: 280px;
  top: 12px;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 470px);
  height: 40px;
  line-height: 40px;
  // background-color: #f40;
  transition: 0.3s;
  .the-table-header-left {
    margin-left: 10px;
  }
  .the-table-header-right {
    display: flex;
    // background-color: #fff;
    align-self: center;
    margin-right: 30px;
    .ant-pagination {
      height: 40px;
      line-height: 40px;
      padding-right: 10px;
      .ant-pagination-prev .ant-pagination-item-link,
      .ant-pagination-next .ant-pagination-item-link {
        height: 40px;
        line-height: 40px;
        // border: 1px solid #000;
      }
    }
    .pagination-text {
      font-size: 14px;
    }
  }
}

.smallLeft {
  left: 160px;
  transition: 0.3s;
}
</style>
